/*
 * @Author: songjian
 * @Date: 2018-11-01 09:51:55
 * @Last Modified by: songjian
 * @Last Modified time: 2018-11-01 16:39:24
 */

import React from 'react';
import { Link } from 'react-router-dom';
import LogoHeader from '../../../components/Header/LogoHeader';
import { Radio, Input, Button } from 'antd';

import styles from './index.module.less';

const RadioGroup = Radio.Group;
const { TextArea } = Input;

export default class InformantCenter extends React.Component {
  state = {
    value: 1,
    nameClassify: [ '商户名称', '商品名称' ],
    addressClassify: [ '商户地址', '商品地址' ],
  }

  onChange = e => {
    console.log('单选变更', e.target.value);
    this.setState({
      value: e.target.value,
    });
  }

  render() {
    const rightContent = (
      <div className={styles.menuBox}>
        <Link className={styles.menuItem} to='/'>首页</Link>
        <Link className={styles.menuItem} to=''>买家中心</Link>
        <Link className={styles.menuItem} to=''>卖家中心</Link>
      </div>
    );

    return (
      <div>
        <LogoHeader moduleName='举报中心' rightContent={rightContent} />
        <div className={styles.box}>
          <div className={styles.container}>
            <div className={styles.inbox}>
              <RadioGroup onChange={this.onChange} value={this.state.value} className={styles.radio_group}>
                <Radio value={1} className={styles.radio1}>商户举报</Radio>
                <Radio value={2}>商品举报</Radio>
              </RadioGroup>

              <div className={styles.merchant_name}>
                <i>*</i>
                {
                  this.state.value === 1 ?
                    (<i>商户名称：</i>) : (<i>商品名称：</i>)
                }
                <Input />
              </div>

              <div className={styles.merchant_address}>
                <i>*</i>
                {
                  this.state.value === 1 ?
                    (<i>商户地址：</i>) : (<i>商品地址：</i>)
                }
                <Input />
              </div>

              <div className={styles.informant_reason}>
                <i>*</i>
                <i>举报原因：</i>
                <Input placeholder="请简述原因，20字以内" />
              </div>

              <div className={styles.detailed_description + ' ' + styles.clearfix}>
                <div className={styles.ibox + ' ' + styles.pullLeft}>
                  <i>*</i>
                  <i>详细说明：</i>
                </div>
                <div className={styles.textbox + ' ' + styles.pullRight}>
                  <TextArea rows={9} className={styles.pullRight} placeholder="请详细描述举报原因，500字以内" />
                  <div className={styles.tips + ' ' + styles.pullRight}>当前已输入0/500字</div>
                </div>
              </div>

              <div className={styles.auxiliary_materials + ' ' + styles.clearfix}>
                <i className={styles.pullLeft}>辅助材料：</i>
                <div className={styles.textbox + ' ' + styles.pullRight}>
                  <div className={styles.img + ' ' + styles.pullRight}>点击上传图片/截图</div>
                </div>
              </div>

              <div className={styles.materials_tips}>
                <i>*</i>
                <i>辅助材料能够更好的帮助我们查证您的举报信息，暂支持.jpg\.png格式图片</i>
              </div>

              <div className={styles.contact_way}>
                <i>联系方式：</i>
                <Input placeholder="请填写您的手机号" />
              </div>

              <div className={styles.contact_tips}>我们会将以此联系方式通知您举报结果</div>

              <Button className={styles.btn}>确定举报</Button>

            </div>
          </div>
        </div>
      </div>
    );
  }
}
